<!DOCTYPE html>
<html>

    {include file='public/header'}
    <style>
        .layui-table-page{
            display: none;
        }
    </style>
    <body>
        <div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="javascript:void(0)">首页</a>
                <a href="javascript:void(0)">分销中心</a>
                <a>
                    <cite>分销商短剧统计</cite>
                </a>
            </span>
            <a class="layui-btn layui-btn-small" id="reload" title="刷新">
                <i class="layui-icon" style="line-height:30px">
                    <i class="iconfont">&#xe6aa;</i>
                </i>
            </a>
        </div>
        <div class="x-body">
            <form class="layui-form" lay-filter="searchForm">
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">日期：</label>
                    <div class="layui-inline" id="time" style="display: flex;align-items: center;">
                        <div class="layui-input-inline" style="margin-right:10px">
                            <input type="text" class="layui-input" name="start_date" id="start_date" autocomplete="off" placeholder="开始时间">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="end_date" id="end_date" autocomplete="off" placeholder="结束日期">
                        </div>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">选择短剧：</label>
                    <div id="pMenu1" style="width:100%;flex:1"></div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">分销商：</label>
                    <div id="pMenu"></div>
                </div>


                <div class="layui-inline">
                    <button class="layui-btn" style="margin-left: 10px;" lay-submit lay-filter="searchListRanking">搜索</button>
                    <button type="reset" id="resetList" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </form>
            <table id="shortIndexRanking" lay-filter="shortIndexRanking"></table>
            <div id="page"></div>
        </div>

        <script>
            let dayTime = dayjsFormat(new Date().getTime()/1000,false);
            var count = 0;
            var curr = 0;
            let totalObj = {}
            var layerMask;
            let params = {
                elem: '#shortIndexRanking',
                toolbar: true,
                url: '/admin/distribution/shortIndexRanking',
                id: 'shortIndexRanking',
                limit: 15,
                page: true,
                totalRow:true,
                where:{
                    start_date:dayTime,
                    end_date:dayTime
                },
                cols: [
                    [
                        { // 表头
                            field: 'date',
                            title: '日期',
                            align: 'center',
                            totalRowText: '总合计：'
                        },
                        {
                            field: 'video_name',
                            title: '短剧名称',
                            align: 'center'
                        },
                        {
                            field: 'company_name',
                            title: '分销商名称',
                            align: 'center'
                        },
                        {
                            field: 'total_recharge',
                            title: '充值总额',
                            align: 'center',
                            sort: true
                        }, {
                            field: 'virtually_recharge',
                            title: '虚拟支付',
                            align: 'center'
                        },
                        {
                            field: 'not_virtually_recharge',
                            title: '非虚拟充值',
                            align: 'center'
                        }
                    ]
                ],
                parseData:function (res) { //res 即为原始返回的数据
                    return {
                        "data": res.data, //解析数据列表
                        "code": res.code, //解析接口状态
                        "count": 0
                    }
                },
                customTotal:function(params){
                    shortRankingCount(params)
                },
                done:function(){
                    setPrice(totalObj)
                }
            }
            tableList(params)
            
            shortRankingCount()

            layui.use(['laydate','table','form'], function () {
                var laydate = layui.laydate;
                var table = layui.table;
                var form = layui.form;
                
                // 日期
                laydate.render({
                    elem: '#time',
                    range: [
                        '#start_date', '#end_date'
                    ],
                    format: 'yyyy-MM-dd',
                    value:[dayTime,dayTime]
                });
                table.on('sort(shortIndexRanking)', function(obj){ 
                    if(obj.field == 'total_recharge'){
                        params.where = {...params.where,total_recharge_sort:obj.type};
                        params.initSort = obj;
                        params.page = {
                            curr:1,
                            limit:15,
                            count
                        }
                        tableList(params)
                        setPage(count)
                    }
                })
                form.on('submit(searchListRanking)', function(data){
                    params.where = data.field
                    params.page = {
                        curr:1,
                        limit:15,
                        count
                    }
                    tableList(params)
                    shortRankingCount(params.where)
                    return false
                });

                
            })
            function shortRankingCount(params){
                Ajax('/admin/distribution/shortRankingCount', params).then(val => {
                    totalObj = {
                        not_virtually_recharge:val.data.count_not_virtually_recharge,
                        total_recharge:val.data.count_recharge,
                        virtually_recharge:val.data.count_virtually_recharge,
                    }
                    count = val.data.total
                    setPage(val.data.total)
                    setPrice(totalObj)
                })
            }
            function setPage(data){
                layui.use('laypage', function(){
                    var laypage = layui.laypage;
                    //执行一个laypage实例
                    laypage.render({
                        elem: 'page'
                        ,count: data
                        ,limit:15
                        ,curr:1
                        ,jump: function(obj, first){
                            if(!first){
                                params.page = {
                                    curr:obj.curr,
                                    limit:15,
                                    count:data
                                }
                                curr = obj.curr
                                tableList(params)
                            }
                        }
                    });
                });
            }

            function setPrice(totalObj){
                Object.keys(totalObj).forEach((item,index)=>{
                    $(`.layui-table-total td[data-field=${item}] .layui-table-cell`).text(Object.values(totalObj)[index]);
                })
            }
            
            let selectParams = {
                url: '/admin/distribution/selectList',
                elem: '#pMenu',
                selected: [],
                tips: '选择分销商',
                name: 'distributor_id',
                field_id: 'id',
                field_Name: 'name'
            }
            selectN(selectParams)
            let selectParams1 = {
                url: '/admin/video/select',
                selected: [],
                tips: '选择短剧',
                name: 'video_id',
                field_id: 'id',
                field_Name: 'name',
                elem: '#pMenu1'
            }
            selectN(selectParams1)
        </script>
    </body>

</html>
